<template>
	<div class="swiperBox">
		<slot name="header"></slot>
		<swiper ref="mySwiper" :options="swiperOptions">
			<swiper-slide v-for="(item) in lisData " :key="item.id">
				<img :src="item.imgpath" class="swiperImg"/>
				<slot name="footer"></slot>
				<slot name="head-left"></slot>
				<slot name="head-right"></slot>
				<slot name="footer-left"></slot>
				<slot name="footer-right"></slot>
			</swiper-slide>
			<div class="swiper-pagination" slot="pagination"></div>
		</swiper>
		
	</div>
	
</template>

<script>
	// import 'swiper/css/swiper.css'
	import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
	import 'swiper/swiper.min.css'
	import 'swiper/swiper-bundle.css'
	import 'swiper/'
	export default {
		name: 'swiper-example-default',
		props: {
			lisData:{
				type:Array,
				default(){
					return[
						
					]
				},
			}
		},
		components: {
			Swiper,
			SwiperSlide
		},
		data() {
			return {
				swiperOptions: {
					pagination: {
						el: '.swiper-pagination',
					},
					// Some Swiper option/callback...
				}
			}
		},
		computed: {
			swiper() {
				return this.$refs.mySwiper.$swiper
			}
		},
		mounted() {
			// this.swiper.slideTo(3, 1000, false)
		}
	}
</script>
<style scoped="scoped" lang="less">
	// .swiperBox{
	// 	margin-top: 0.27rem;
	// }
	// .swiperImg{
	// 	margin-left: 0.13rem;
	// 	display: block;
	// 	width: 3.5rem;
	// 	height: 1.16rem;
	// }
</style>
